<template>
    <div>
        <div class="content" v-loading="pageLoading" element-loading-text="数据加载中，请稍后" element-loading-spinner="el-icon-loading" >
            <BoxWithTitle class="left-wrapper" title="目录" icon="&#xe60d;" isOther>
                <template #other>
                    <el-select  @change="changeMenuSelModel" v-model="menuSelModel" placeholder="请选择" size="small" style="width:140px">
                        <el-option
                        v-for="(item,index) in menuSeloptions"
                        :key="index"
                        :label="item"
                        :value="item">
                        </el-option>
                    </el-select>
                </template>
                <div class="menu-tree">
                    <treeMenu :treeData="menuList" name="treeName" @menuLeftClick="handleMenuClick" ref="treeMenu"/>
                </div>
            </BoxWithTitle>
            <div class="right-wrapper" >
                <div class="boxWrapper searchForm">
                    <el-form :inline="true" size="small">
                        <el-form-item label="时间">
                            <el-date-picker
                                v-model="startTime"
                                format="yyyy年MM月dd日"
                                value-format="yyyy/MM/dd"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                            至
                            <el-date-picker
                                v-model="endTime"
                                format="yyyy年MM月dd日"
                                value-format="yyyy/MM/dd"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                            <el-button type="primary" size="small" @click="getTreeData" style="margin-left:8px" icon="el-icon-search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div> 
                <div class="datawrapper boxWrapper">
                    <el-collapse v-model="activeNames" @change="handleChangeCollapse">
                    <el-collapse-item  name="1">
                        <template slot="title">
                             <div class="collapseTitle">
                                <div>
                                    <span>数据展示</span>
                                    <span class="tips"> TIPS:在单元格右键可进行数据审核</span>
                                    <span class="describe">
                                        示例：
                                        <i class="iconfont greenText">&#xe711;</i> 正常
                                        <i class="iconfont yellowText">&#xe711;</i> 异常
                                        <i class="iconfont redText">&#xe711;</i> 错误
                                    </span>
                                </div>
                            </div>
                        </template>
                        <ve-table 
                        fixed-header
                        :max-height="collapseTableHeight"
                        :columns="mainColumns"
                        :table-data="tableList"
                        rowKeyFieldName="number"
                        :rowStyleOption="rowStyleOption"
                        :eventCustomOption="eventCustomOption"
                        :contextmenu-body-option="contextmenuBodyOption"
                        :checkbox-option="checkboxOption"
                        :virtual-scroll-option="virtualScrollMain"
                        :sort-option="sortOption"
                        :scroll-width="600"
                        border-y
                        border-x
                        v-if="tableList.length > 0"
                        id="contextmenu-target"
                        ref="tableMainRef"
                        />
                        <noData v-else showData/>
                    </el-collapse-item>
                    <el-collapse-item name="2">
                        <template slot="title">
                            <div class="collapseTitle">
                                <span>过程线</span>
                                <el-button type="text" size="medium" @click.stop="dataFilteringDialogVisible = true" style="margin-right: 20px;"><i class="iconfont" style="margin-right: 5px;">&#xe60b;</i>数据过滤</el-button>
                            </div>
                        </template>
                       <noData showChart v-if="chartData == null" />
                       <div id="chartLineErr" ref="chartLine" v-show="chartData != null" style="height:230px"/>
                    
                    </el-collapse-item> 
                </el-collapse>
                </div>
            </div>
        </div>

        <el-dialog
        title="数据过滤"
        :visible.sync="dataFilteringDialogVisible"
        v-dialogDrag
        width="520px">
            <el-form ref="filterData" :model="filterData" label-width="120px">
                <el-form-item label="用户审核状态">
                    <el-checkbox v-model="filterData.a" @change="handleChangeE" :disabled="filterData.d || filterData.e">未审核</el-checkbox>
                    <el-checkbox v-model="filterData.b" @change="handleChangeF" :disabled="filterData.d || filterData.e">审核通过</el-checkbox>
                    <el-checkbox v-model="filterData.c" @change="handleChangeG" :disabled="filterData.d || filterData.e">审核未通过</el-checkbox>
                </el-form-item>
                <el-form-item label="系统审核状态">
                    <el-checkbox v-model="filterData.d" :disabled="filterData.a || filterData.b || filterData.c">审核通过</el-checkbox>
                    <el-checkbox v-model="filterData.e" :disabled="filterData.a || filterData.b || filterData.c">审核未通过</el-checkbox>
                </el-form-item>
                <el-form-item label="测值状态" >
                    <el-checkbox v-model="filterData.f" 
                    :disabled="filterData.d || filterData.e || (filterData.a && !filterData.b && !filterData.c) || (!filterData.a && filterData.b && !filterData.c) ||(!filterData.a && !filterData.b && filterData.c) || (filterData.a && !filterData.b && filterData.c)">正常</el-checkbox>

                    <el-checkbox v-model="filterData.g" :disabled="((filterData.c || filterData.b ) && !filterData.a) || filterData.d || filterData.e">异常</el-checkbox>

                    <el-checkbox v-model="filterData.k" :disabled="((filterData.c || filterData.b ) && !filterData.a) || filterData.d || filterData.e">错误</el-checkbox>

                    <el-checkbox v-model="filterData.l" :disabled="((filterData.c || filterData.b ) && !filterData.a)|| filterData.d || filterData.e">未判定</el-checkbox>
                </el-form-item>
                
                <el-form-item>
                    <el-button @click="dataFilteringDialogVisible = false" size="small" icon="el-icon-circle-close">取消</el-button>
                <el-button type="primary" @click="handleConfirmFilter" size="small" icon="el-icon-circle-check">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import BoxWithTitle from '@/components/base/BoxWithTitle.vue'
import {GetTreeStyle,getMonitoringTreeData,getMonitoringErrorData,GetValueAllEnd,updateValue} from "@/api/https";
import bus from '@/utils/eventBus.js';
import treeMenu from '@/components/base/treeMenu.vue'
import noData from '@/components/base/noData.vue'
export default ({
    name:'error',
    components:{BoxWithTitle,treeMenu,noData},
    props:{
        stationId:{
            type:[String,Number],
            default:''
        },
    },
    data() {
        return{
            fileList:[],
            menuSeloptions:[],
            menuSelModel:'',
            menuList:[],
            mainColumns:[],
            startTime:'',
            endTime:'',
            pageLoading:false,
            pageIndex:1,
            totalPage:1,
            defaultKey:'',
            treeId:'',
            activeNames:['1','2'],
            tableList:[],
            rowStyleOption: {
                clickHighlight: false,
                hoverHighlight: true,
            },
            eventCustomOption:{
                bodyCellEvents:({row,column,rowIndex})=>{
                    return {
                        click: (event) => {
                            this.preview(row,column)
                        },
                    }
                },
            }, 
            virtualScrollMain:{
                enable:false,
                scrolling: this.scrolling,
            },
            checkedDataList:[],
            contextmenuBodyOption:{
                contextmenus: [
                    {
                        type:'abnormal',
                        label:'审核通过'
                    },{
                        type:'error',
                        label:'审核未通过'
                    },
                    {
                        type:'abnormalMore',
                        label:'批量设为审核通过'
                    },{
                        type:'errorMore',
                        label:'批量设为审核未通过'
                    }
                ],
                afterMenuClick: ({ type, selectionRangeKeys, selectionRangeIndexes })=> {
                    this.afterRightMenu(type, selectionRangeKeys, selectionRangeIndexes)
                },
            },
            checkboxOption: {
                selectedRowKeys: [],
                // 行选择改变事件
                selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
                this.checkboxOption.selectedRowKeys = selectedRowKeys;
                    if(isSelected){
                        this.checkedDataList.push({
                            id:row.id,
                            code_id:row.codE_ID,
                            status:''
                        })
                    }else{
                        const index = Number(row.number) - 1
                        this.checkedDataList.splice(index,1)
                    }
                },
                // 全选改变事件
                selectedAllChange: ({ isSelected, selectedRowKeys }) => {
                    this.checkboxOption.selectedRowKeys = this.tableList.map((x) => x.number);
                    if(isSelected){
                        this.checkedDataList = []
                        this.tableList.forEach(item=>{
                            this.checkedDataList.push({
                                id:item.id,
                                code_id:item.codE_ID,
                                status:''
                            })
                        })
                    }else{
                        this.checkboxOption.selectedRowKeys = []
                        this.checkedDataList = []
                    }
                },
            },
            sortOption: {
                sortChange: (params) => {
                    this.sortChange(params);
                },
            },
            tableTitle:{},
            filterData:{
                a: true,
                b: true,
                c: true,
                d: false,
                e: false,
                f: true,
                g: true,
                k:false,
                l:true,
            },
            myChart:null,
            importDialogVisible:false,
            dataFilteringDialogVisible:false,
            collapseTableHeight:'calc(100vh - 630px)',
            timer:null,
            getLineData:{},
            chartData:null,
            chartCodeId:'',
            chartComPs:'',
            watchTime:'',
            field:''
        }
    },
    activated(){
        this.$nextTick(()=>{
            if(this.tableList.length > 0){
                this.updateChart()
            }
        })
        if( this.pageIndex < this.totalPage){
            this.virtualScrollMain.enable = true
        }
    },
    deactivated(){
        this.clearChart()
        clearTimeout(this.timer)
        this.timer = null
        this.virtualScrollMain.enable = false
    },
    beforeDestroy(){
        this.clearData()
        this.clearChart(true)
    },
    mounted(){
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        this.startTime =  y + '/' + (m - 3) + '/' +  d
        this.endTime = y + '/' + m + '/' + d
        this.GetTreeStyleData()
    },
    watch:{
        'stationId':{
            handler(newVal,oldVal){
                this.clearData()
                this.clearChart(true)
                this.menuList = []
                this.GetTreeStyleData()
            }
        },
        'tableTitle':{
            handler(newVal,oldVal){
                let mainColumns = []
                if(this.tableTitle.codE_ID){
                    mainColumns.push({
                        title:'状态',
                        field:'outliersign',
                        key:'outliersign',
                        width: 80,
                        type: "checkbox",
                        renderBodyCell: ({ row, column, rowIndex }, h) => {
                            const status = row.outliersign;
                            if(status == '审核通过'){
                                return(
                                    <el-tooltip class="item" effect="dark" content='审核通过' placement="top-start">
                                        <i class="iconfont greenText ico">&#xe630;</i>
                                    </el-tooltip>
                                )
                            }else if(status == '审核未通过'){
                                return(
                                    <el-tooltip class="item" effect="dark" content='审核未通过' placement="top-start">
                                        <i class="iconfont redText ico" style="font-size:18px">&#xe654;</i>
                                    </el-tooltip>
                                )
                            }else if(status == '未审核'){
                                return(
                                    <el-tooltip class="item" effect="dark" content='未审核' placement="top-start">
                                        <i class="iconfont greyText ico">&#xe645;</i>
                                    </el-tooltip>
                                )
                            }
                        }
                    },{
                        field: "number",
                        key: "number",
                        operationColumn: false,
                        title: "编号",
                        width: 50,
                        fixed: "left",
                    },{
                        title:this.tableTitle['pointName'],
                        field:'pointName',
                        key:'pointName',
                        width:100
                    },{
                        title:this.tableTitle['watchTime'],
                        field:'watchTime',
                        key:'watchTime',
                        sortBy: "",
                        width:170,
                        renderBodyCell: ({ row, column, rowIndex }, h) => {
                            return (
                                <div>
                                    <i class="iconfont blueText smallIco">&#xe7ec;</i>
                                    <span>{row.watchTime}</span>
                                </div>
                            )
                        }
                    })
                    if(this.tableTitle.comPs && this.tableTitle.comPs.length > 0){
                        this.tableTitle.comPs.forEach((item,index)=>{
                            mainColumns.push({
                                title:item,
                                field:item,
                                key:item,
                                width:160,
                                sortBy: "",
                                renderBodyCell:({ row, column, rowIndex }, h)=>{
                                    const value = row[item];
                                    const status = row[item + 'state']
                                    {
                                        if(status == '正常'){
                                            return (
                                                <div class="result">   
                                                <el-tooltip class="item" effect="dark" content='正常' placement="top-start">
                                                    <i class="iconfont greenText">&#xe711;</i>
                                                </el-tooltip>
                                                    <span class="greenText">{value}</span>
                                                </div>
                                            );
                                        }else if(status == '异常'){
                                            return (
                                                <div class="result">
                                                
                                                    <el-tooltip class="item" effect="dark" content='异常' placement="top-start">
                                                    <i class="iconfont yellowText">&#xe711;</i>
                                                </el-tooltip>
                                                    <span class="yellowText">{value}</span>
                                                </div>
                                            );
                                        }else if(status == '错误'){
                                            return (
                                                <div class="result">
                                                    <el-tooltip class="item" effect="dark" content='错误' placement="top-start">
                                                    <i class="iconfont redText">&#xe711;</i>
                                                </el-tooltip>
                                                    <span class="redText">{value}</span>
                                                </div>
                                            );
                                        }else{
                                            return (
                                                <div>
                                                    <span>{value}</span>
                                                </div>
                                            );
                                        }
                                        
                                    }
                                }
                            })
                        })
                    }
                    mainColumns.push({
                        title:this.tableTitle['recordUser'],
                        field:'recordUser',
                        key:'recordUser',
                        width:120,
                        renderBodyCell: ({ row, column, rowIndex }, h) => {
                                return (
                                    <div>
                                        <i class="iconfont blueText smallIco" style="font-size:22px">&#xeb54;</i>
                                        <span>{row.recordUser}</span>
                                    </div>
                                )
                            }
                    },{
                        title:this.tableTitle['treatmentUser'],
                        field:'treatmentUser',
                        key:'treatmentUser',
                        width:120,
                        renderBodyCell: ({ row, column, rowIndex }, h) => {
                            return (
                                <div>
                                    <i class="iconfont blueText smallIco">&#xe60c;</i>
                                    <span>{row.treatmentUser}</span>
                                </div>
                            )
                        }
                    },{
                        title:this.tableTitle['remark'],
                        field:'remark',
                        key:'remark',
                        width:240,
                        ellipsis: {
                            showTitle: true,
                        },
                    })
                }
                this.mainColumns = [...mainColumns]
            },
            deep:true
        }
    },
    methods:{
         handleChangeCollapse(val){
            if(val.length == 1 && val[0] == '1'){
                this.collapseTableHeight = `calc(100vh - 380px)`
            }else{
                this.collapseTableHeight = `calc(100vh - 630px)`
            }
        },
        handleMenuClick(data){
            this.clearData()
            this.clearChart()
            this.treeId = data.treeid
            this.defaultKey = data.id
            this.getDataList()
        },
        clearData(){
            this.checkboxOption.selectedRowKeys = []
            this.virtualScrollMain.enable = false
            this.pageIndex = 1
            this.totalPage = 1
            this.treeId = ''
            this.tableList = []
            this.tableTitle = {}
            if (this.timer) clearTimeout(this.timer)
            this.timer = null
        },
        GetTreeStyleData(){
            GetTreeStyle(this.stationId).then(res =>{
                if(res.isSuccess && res.data && res.data.length > 0){
                    this.menuSeloptions = res.data || []
                    this.menuSelModel = res.data[0]
                    this.getTreeData()
                }else{
                    this.menuSeloptions = []
                    this.menuSelModel = ''
                }
            })
        },
        getTreeData(){
            this.pageLoading = true
            getMonitoringTreeData(this.stationId,2,this.menuSelModel,this.startTime,this.endTime).then(res=>{
                if(res.isSuccess && res.data && res.data.length > 0){
                    this.menuList = res.data || [];
                    this.findLeafNodes(this.menuList);
                    this.$nextTick(()=>{
                        this.$refs.treeMenu.$refs.tree.setCurrentKey(this.defaultKey);
                        this.getDataList()
                    })
                }else{
                    this.menuList = []
                    this.pageLoading = false
                }
            });
        },
        findLeafNodes(data) {
            if (data[0].children == null || data[0].children.length === 0){
                this.defaultKey = data[0].id
                this.treeId = data[0].treeid
                return
            }else{
                this.findLeafNodes(data[0].children);
            }
        },
        changeMenuSelModel(){
            this.clearData()
            this.clearChart()
            this.getTreeData()
        },
        getDataList(){
            this.watchTime = ''
            this.field = ''
            this.checkboxOption.selectedRowKeys = []
            getMonitoringErrorData(this.stationId, this.treeId, this.startTime, this.endTime, this.pageIndex, 50,'倒序',2,this.menuSelModel).then(res=>{
                if(res.isSuccess && res.data){ 
                    this.tableTitle = res.data;
                    const _list = []
                    if(res.data.node && res.data.node.length > 0){
                        res.data.node.forEach((item,index)=>{
                            const data = {
                                id:item.id,
                                number:item.number,
                                outliersign:item.outliersign,
                                pointName:item.pointName,
                                recordUser:item.recordUser,
                                remark:item.remark,
                                treatmentUser:item.treatmentUser,
                                watchTime:item.watchTime,
                                measuresStatus:item.measuresStatus,
                                codE_ID:item.codE_ID
                            }
                            item.comPs_1.forEach((subItem,subIndex)=>{
                                data[subItem] = item.comPs[subIndex]
                                data[subItem + 'state'] = item.comP_outs[subIndex]
                            })
                            _list.push(data)
                        })
                    }
                    
                    if(this.pageIndex > 1){
                        this.tableList = this.tableList.concat(_list);
                    }else{
                        this.tableList = _list
                    }
                    this.totalPage = res.data.pagesNumber;  
                    this.pageLoading = false

                    this.virtualScrollMain.enable = this.pageIndex < res.data.pagesNumber

                    if( this.pageIndex == 1 && this.tableList.length > 0){
                        this.chartCodeId = this.tableList[0].codE_ID,
                        this.chartComPs = this.tableTitle.comPs[0]
                        this.getChartLineData();
                    }
                }else{
                    this.clearChart()
                    this.clearData()
                    this.chartCodeId = ''
                    this.chartComPs = ''
                    this.chartData = null
                    this.pageLoading = false
                    if(res.errorMessage){
                        this.$message.error(res.errorMessage)
                    }
                }
            });
        },
       getChartLineData() {
            GetValueAllEnd(this.chartCodeId,this.chartComPs,1,this.filterData).then(res=>{
                if(res.isSuccess){
                    if (res.data && res.data.valueData != null) {
                      this.chartData = res.data
                      this.$nextTick(()=>{
                        this.drawChart();
                      })
                    }else{
                        this.chartData = null
                        this.watchTime = ''
                        this.field = ''
                        this.clearChart()
                    }
                }else{
                    this.chartData = null
                    this.watchTime = ''
                    this.field = ''
                    this.clearChart()
                }
            })
        },
       
        drawChart(){
            if (this.myChart) {
              this.updateChart(); 
              return;
            }
            const dom = document.getElementById('chartLineErr');
            if (!dom) return;

            this.myChart = echarts.init(dom, null, { locale: "ZH" });
            this.myChart.setOption(this.getChartOption(), true);
        },
        
        getChartOption(){
            const {valueData,point,unit,valueMax,valueMin,valueLen,limitLower,limitUpper} = this.chartData
            let markData = []
            let LineKeys = []
            if(valueData && valueData.length > 0)
            valueData.forEach((item,index)=>{
                LineKeys.push([item.watchTime,Number(item.value)])
                if(this.watchTime && this.field && item.watchTime == this.watchTime && item.value == this.field){
                    markData = [item.watchTime,item.value]
                }
            })

            const series = [{
                name:'实测值',
                type: 'line',
                smooth: false,
                symbol: 'none',
                areaStyle: {
                    origin: 'start', 
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(58, 77, 233,1)' },
                        { offset: 0.5, color: 'rgba(58, 77, 233, 0.2)' },
                        { offset: 1, color: 'rgba(58, 77, 233, 0)' }
                    ])
                },
                smooth: true, // 平滑曲线
                data: LineKeys, 
                markPoint:{
                    data:[{
                        coord: markData,  // 指定坐标
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.data.coord[1]; // 返回y轴数值
                            },
                        },
                        itemStyle: {
                            color: 'rgb(255, 0, 0)' // 纯红色
                        },
                    }],
                }
            }]

            if(limitLower.length > 0) {
                const lower = []
                limitLower.forEach(item =>{
                    lower.push([item.watchTime,Number(item.value)])
                })
                series.push({
                    name:'预测下限',
                    type: 'line',
                    smooth: false,
                    symbol: 'none',
                    data: lower,
                })
            }

            if(limitUpper.length >0) {
                const Upper = []
                limitUpper.forEach(item =>{
                    Upper.push([item.watchTime,Number(item.value)])
                })
                series.push({
                    name:'预测上限',
                    type: 'line',
                    smooth: false,
                    symbol: 'none',
                    data: Upper,
                })
            }
            return {
                tooltip: {
                    trigger: 'axis',
                },
                title: {
                    left: 'center',
                    text: point
                },
                grid: {
                    top:'16%',
                    left: '3%',
                    right: '3%',
                    bottom: '0%',
                    containLabel: true,
                    borderWidth:1,
                    show: true,
                    borderColor: '#000',
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'time',
                    axisLabel: {
                        formatter: function(value) {
                            return echarts.format.formatTime('yyyy-MM-dd', value);
                        }
                    },
                    data: LineKeys,
                    show: true, // X轴 网格线 颜色类型的修改
                    axisLine: {
                        show: true, // Y轴线
                        onZero: false, 
                    },
                    splitLine: {
                    show: true, // X轴线 颜色类型的修改
                    lineStyle: {
                        type: 'dashed',
                        color: '#a8a8a8',
                    },
                    },
                },
                yAxis: {
                    type: 'value',
                    name:`单位(${unit || ''})`,
                    axisLabel: {
                        formatter: function(value) {
                            // 解决科学计数法问题
                            return value.toString()
                        }
                    },
                    interval:Number(valueLen), 
                    max: valueMax,
                    min: valueMin,
                    axisLine: {
                        show: true, // Y轴线
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#a8a8a8',
                        },
                    },
                },
                dataZoom: [
                    {
                    type: 'inside',
                    },
                ],
                series: series
            }
        },
        updateChart() {
          if (!this.myChart) return;
          this.myChart.setOption(this.getChartOption(), true);
        },
        clearChart(dispose){
            if(this.myChart){
              this.myChart.clear()
              if(dispose){
                  this.myChart.dispose()
                  this.myChart = null;
                  this.chartData = null
                  this.watchTime = null
                  this.field = null
              }
            }
        },
        afterRightMenu(type, selectionRangeKeys, selectionRangeIndexes){
            const data = this.tableList[selectionRangeKeys.startRowKey - 1]
            const _dataList = []
            if(type == 'abnormal'){
                _dataList.push({
                    id:data.id,
                    code_id:data.codE_ID,
                    status:1
                })
                if(this.checkedDataList.length > 1){
                    this.$confirm(`系统检测到您当前勾选多条，此操作只能审核当前一条，是否继续？`,{
                            type:'warning'
                        }).then(() => {
                             this.handleUpdateValue(_dataList)
                        }).catch(() => {}); 
                }else{
                    this.handleUpdateValue(_dataList)
                }
            }else if(type == 'error'){
                _dataList.push({
                    id:data.id,
                    code_id:data.codE_ID,
                    status:2
                })
                if(this.checkedDataList.length > 1){
                    this.$confirm(`系统检测到您当前勾选多条，此操作只能审核当前一条，是否继续？`,{
                            type:'warning'
                        }).then(() => {
                            this.handleUpdateValue(_dataList)
                        }).catch(() => {}); 
                }else{
                    this.handleUpdateValue(_dataList)
                }
               
            }else if(type == 'abnormalMore'){
                if(this.checkedDataList.length == 0){
                    this.$message.error('请先勾选要设置状态的数据!')
                    return false
                }else{
                  this.$confirm(`系统检测到您当前勾选${this.checkedDataList.length}条，是否要将${this.checkedDataList.length}条数据全部审核为通过？`,{
                      type:'warning'
                  }).then(() => {
                      this.checkedDataList.forEach(item=>{
                        _dataList.push(
                            {
                                id:item.id,
                                code_id:item.code_id,
                                status:1
                            }
                        )
                      })
                      this.handleUpdateValue(_dataList)
                  }).catch(() => {});  
                }
            }else if(type =='errorMore'){
                if(this.checkedDataList.length == 0){
                    this.$message.error('请先勾选要设置状态的数据!')
                    return false
                }else{
                  this.$confirm(`系统检测到您当前勾选${this.checkedDataList.length}条，是否要将${this.checkedDataList.length}条数据全部审核为未通过？`,{
                      type:'warning'
                  }).then(() => {
                      this.checkedDataList.forEach(item=>{
                        _dataList.push(
                            {
                                id:item.id,
                                code_id:item.code_id,
                                status:2
                            }
                        )
                    })
                    this.handleUpdateValue(_dataList)
                  }).catch(() => {}); 
                    
                }
            }
        },
        handleUpdateValue(data){
            updateValue(data).then(res=>{
                if(res.isSuccess && res.data && res.data.length > 0){
                        let err = []
                        let success = []
                        let message = ''
                        res.data.forEach(item=>{
                            if(item.rn){
                                success.push(item.id)
                            }else{
                                err.push(item.mess)
                                message += `<p style="line-height:30px">${item.mess}</p>`
                            }
                        })
                        if(err.length > 0){
                            this.$message({
                                type:'error',
                                dangerouslyUseHTMLString: true,
                                message: message
                            });
                        }
                        if(success.length > 0){
                            this.getDataList()
                        }
                        this.checkboxOption.selectedRowKeys = []
                        this.checkedDataList = []
                        this.pageIndex = 1
                        this.totalPage = 1
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
        preview(rowData, column){ 
            if(column.title != '状态' && column.title != '编号'){
                const time = rowData.watchTime.split(' ')
                this.watchTime = time[0]
                this.field = rowData[column.field]
                this.chartCodeId = rowData.codE_ID
                this.chartComPs = column.title
                this.clearChart()
                this.getChartLineData()
           }
        },
        handleChangeE(val){
            const data = {...this.jcsjData}
            if(val){
                data.f = false
                data.g = true
                data.k = true
                data.l = true
                if(data.b){
                    data.f = true
                }
            }else{
                data.f = false
                data.g = false
                data.k = false
                data.l = false
            }
            this.jcsjData = {...data}
        },

        handleChangeF(val){
            const data = {...this.jcsjData}
            if(val){
                data.f = false
                data.g = false
                data.k = false
                data.l = false
                if(data.a){
                    data.f = true
                    data.g = true
                    data.k = true
                    data.l = true
                }
                this.jcsjData = {...data}
            }else{
                data.b = val
                this.jcsjData = {...data}
                this.handleChangeE(data.a)
            }
        },

        handleChangeG(val){
            const data = {...this.jcsjData}
            if(val){
                data.f = false
                data.g = false
                data.k = false
                data.l = false
                if(data.a && data.b){
                    data.f = true
                    data.g = true
                    data.k = true
                    data.l = true
                }else if(data.a){
                    data.f = false
                    data.g = true
                    data.k = true
                    data.l = true
                }
                this.jcsjData = {...data}
            }else{
                data.c = val
                this.jcsjData = {...data}
                this.handleChangeE(data.a)
            }
            
        },
        handleConfirmFilter() {
            this.chartCodeId = this.tableList[0].codE_ID
            this.chartComPs = this.tableTitle.comPs[0]
            this.getChartLineData()
            this.dataFilteringDialogVisible = false;
        },
        scrolling({
            startRowIndex,
            visibleStartIndex,
            visibleEndIndex,
            visibleAboveCount,
            visibleBelowCount,
        }) {
            if(visibleBelowCount <= 0){
                if (this.timer) clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    this.changePageSize()
                }, 300)
            }else{
                clearTimeout(this.timer)
            }
        },
        changePageSize(){
            if( this.pageIndex < this.totalPage){
                this.pageIndex++
                this.getDataList()
            }
        },
        sortChange(params){
            for(let i in params){
                if(i == 'watchTime'){
                    this.tableList.sort((a, b) => {
                        let val1 = a[i];
                        let val2 = b[i];
                        if (params[i] === "asc") {
                            return new Date(val1) - new Date(val2);
                        } else if (params[i] === "desc") {
                            return new Date(val2) - new Date(val1);
                        } else {
                            return 0;
                        }
                    });
                }
                if(params[i] != '' && i != 'watchTime'){
                this.tableList.sort((a, b) => {
                    if (params[i] === "asc") {
                        return a[i] - b[i];
                    } else if (params[i] === "desc") {
                        return b[i] - a[i];
                    } else {
                        return 0;
                    }
                });
                }
            }
        },
    }
})
</script>
<style lang="scss" scoped>
.content{
   display: grid;
   grid-template-columns: 300px 1fr;
   height: calc(100vh - 180px);
   margin-top:10px;
    .left-wrapper{
       width: 300px;
        height: calc(100vh - 186px);
        flex-shrink: 0;
        .menu-tree{
            height: calc(100vh - 246px);
            overflow-y: auto;
        }
    }
    .right-wrapper{
        height: calc(100vh - 186px);
        overflow: auto;
        margin-left:10px;
    }
}
.searchForm{
    padding: 10px;
    box-sizing: border-box;
}
::v-deep .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 0px !important;
}
::v-deep .ico{
    font-size: 20px !important;
    vertical-align: middle !important;
}
::v-deep .result{
    i{
        margin-right: 8px;
        font-size: 14px;
    }
}
.datawrapper{
    margin-top:10px;
    padding:0 20px;
    box-sizing: border-box;
}
::v-deep .smallIco{
    margin-right: 6px !important;
    font-size: 18px;
    vertical-align: middle;
}
.collapseTitle{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.describe{
  font-weight: normal;
  margin-left:10px;
  font-size: 12px;
  i{
    font-size: 12px;
  }
}
.tips{
    font-size: 12px;
    color:#999;
    font-weight: normal;
    margin-left: 10px;
}
</style>